<template>
  <div class="inventory-management">
    <page>
      <div slot="top">
        <el-form label-width="100px" size="small" :inline="true">
          <!-- <el-form-item label="隧道部位">
            <el-select placeholder="请选择" v-model="queryParmars.tunnelArea" class="query-item">
              <el-option
                v-for="item in tunnelPartsOptions"
                :key="item.id"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="单元">
            <el-select placeholder="请选择" v-model="queryParmars.unit" class="query-item">
              <el-option v-for="item in unitOptions" :key="item.id" :label="item.dictLabel" :value="item.dictValue">
              </el-option>
            </el-select>
          </el-form-item> -->
          <!-- <el-form-item class="btn-query">
            <el-button type="primary" @click="getTableData(1)">查询</el-button>
            <el-button @click="resetHandle">重置</el-button>
          </el-form-item> -->
        </el-form>
        <div class="table-operation">
          <el-button type="primary" size="small" icon="el-icon-plus" @click="handleAdd"> 添加生产任务 </el-button>
        </div>
      </div>
      <div slot="body">
        <el-table :data="tableData" border>
          <el-table-column label="序号" width="50px" type="index"></el-table-column>
          <el-table-column label="产品编码" prop="prodCode" align="center"></el-table-column>
          <el-table-column label="产品类型" prop="prodType" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.prodType=='ggj'">钢拱架</span>
              <span v-if="scope.row.prodType=='wp'">网片</span>
              <span v-if="scope.row.prodType=='xdg'">小导管</span>
              <span v-if="scope.row.prodType=='ljg'">连接钢板</span>
            </template>
          </el-table-column>

          <el-table-column v-if="value1=='ggj'" label="弧长" prop="arcLength" align="center"></el-table-column>
          <el-table-column v-if="value1=='ggj'" label="弦高" prop="height" align="center"></el-table-column>
          <el-table-column v-if="value1=='ggj'" label="半径" prop="radius" align="center"></el-table-column>
          <el-table-column v-if="value1=='ggj'" label="工字钢规格" width="100" prop="steel" align="center"></el-table-column>

          <el-table-column v-if="value1=='wp'" label="长" prop="arcLength" align="center"></el-table-column>
          <el-table-column v-if="value1=='wp'" label="宽" prop="prodWide" align="center"></el-table-column>
          <el-table-column v-if="value1=='wp'" label="钢筋规格" prop="rebarSpecifications" align="center"></el-table-column>

          <el-table-column v-if="value1=='ljg'" label="长" prop="prodLong" align="center"></el-table-column>
          <el-table-column v-if="value1=='ljg'" label="宽" prop="prodWide" align="center"></el-table-column>
          <el-table-column v-if="value1=='ljg'" label="厚" prop="proThick" align="center"></el-table-column>
          <el-table-column v-if="value1=='ljg'" label="钢板规格" prop="steelPlateSpecifications" align="center"></el-table-column>

          <el-table-column v-if="value1=='xdg'" label="长" prop="prodLong" align="center"></el-table-column>
          <el-table-column v-if="value1=='xdg'" label="止浆段长度" width="100" prop="prodLong" align="center"></el-table-column>
          <el-table-column v-if="value1=='xdg'" label="小导管规格" width="100" prop="conduitSpecifications" align="center"></el-table-column>

          <el-table-column label="计划产量" prop="planNum" align="center"></el-table-column>
          <el-table-column label="已完成产量" prop="finishNum" width="100" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.finishNum*1}}</span>
            </template>
          </el-table-column>
          <el-table-column label="剩余待生产" width="100" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.planNum*1 - scope.row.finishNum*1}}</span>
            </template>
          </el-table-column>
          <el-table-column label="最近调整" prop="updateTime" align="center"></el-table-column>
          <el-table-column label="操作人" prop="createByName" align="center"></el-table-column>
          <el-table-column label="状态" prop="status" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.status==0">未完成</span>
              <span v-if="scope.row.status==1">已完成</span>
            </template>
          </el-table-column>
          <el-table-column label="最新备注" prop="remark" align="center"></el-table-column>

          <!-- <el-table-column label="隧道部位" prop="tunnelArea" align="center">
            <template slot-scope="scope">
              <span>{{
                (tunnelPartsOptions.find(item => item.dictValue == scope.row.tunnelArea) || {}).dictLabel ||
                scope.row.tunnelArea
              }}</span>
            </template>
          </el-table-column> -->
          <el-table-column label="操作" width="200px" align="center">
            <template slot-scope="scope">
              <el-link type="primary" :underline="false" @click="openOutbound(scope.row)"> 调整 </el-link>
              <el-link type="primary" :underline="false" @click="openHandle(1, scope.row)"> 日志 </el-link>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-dialog :title="prodTitle" :close-on-click-modal="false" :visible.sync="openProd" width="800px" append-to-body>
        <el-table :data="tableData1" @selection-change="handleSelectionChange" ref="multipleTable" border>
          <el-table-column label="序号" type="index" width="50px"></el-table-column>
          <el-table-column label="产品型号" prop="prodCode"></el-table-column>
          <el-table-column v-if="value1=='ggj'" label="弦长" prop="arcLength"></el-table-column>
          <el-table-column v-if="value1=='ggj'" label="弦高" prop="height"></el-table-column>
          <el-table-column v-if="value1=='ggj'" label="半径" prop="radius"></el-table-column>
          <el-table-column v-if="value1=='ggj'" label="工字钢规格" prop="steel"></el-table-column>

          <el-table-column v-if="value1=='wp'" label="长" prop="arcLength" align="center"></el-table-column>
          <el-table-column v-if="value1=='wp'" label="宽" prop="prodWide" align="center"></el-table-column>
          <el-table-column v-if="value1=='wp'" label="钢筋规格" prop="rebarSpecifications" align="center"></el-table-column>

          <el-table-column v-if="value1=='ljg'" label="长" prop="prodLong" align="center"></el-table-column>
          <el-table-column v-if="value1=='ljg'" label="宽" prop="prodWide" align="center"></el-table-column>
          <el-table-column v-if="value1=='ljg'" label="厚" prop="proThick" align="center"></el-table-column>
          <el-table-column v-if="value1=='ljg'" label="钢板规格" prop="steelPlateSpecifications" align="center"></el-table-column>

          <el-table-column v-if="value1=='xdg'" label="长" prop="prodLong" align="center"></el-table-column>
          <el-table-column v-if="value1=='xdg'" label="止浆段长度" prop="prodLong" align="center"></el-table-column>
          <el-table-column v-if="value1=='xdg'" label="小导管规格" prop="conduitSpecifications" align="center"></el-table-column>
          <el-table-column align="center" type="selection"></el-table-column>
        </el-table>
        <el-form ref="prodForm" :model="prodForm" :rules="prodRules" label-width="140px" label-position="left" style="margin-top: 20px;">
          <!-- <el-form-item v-if="value1=='ggj'" label="弧长：" prop="arcLength">
            <el-input v-model="prodForm.arcLength" placeholder="请输入弧长" />
          </el-form-item>
          <el-form-item v-if="value1=='ggj'" label="弦高：" prop="height">
            <el-input v-model="prodForm.height" placeholder="请输入弦高" />
          </el-form-item>
          <el-form-item v-if="value1=='ggj'" label="半径：" prop="radius">
            <el-input v-model="prodForm.radius" placeholder="请输入半径" />
          </el-form-item>
          <el-form-item v-if="value1=='ggj'" label="工字钢规格：" prop="steel">
            <el-input v-model="prodForm.steel" placeholder="请输入工字钢规格" />
          </el-form-item>

          <el-form-item v-if="value1=='wp'" label="长：" prop="arcLength">
            <el-input v-model="prodForm.arcLength" placeholder="请输入长" />
          </el-form-item>
          <el-form-item v-if="value1=='wp'" label="宽：" prop="prodWide">
            <el-input v-model="prodForm.prodWide" placeholder="请输入宽" />
          </el-form-item>
          <el-form-item v-if="value1=='wp'" label="钢筋规格：" prop="rebarSpecifications">
            <el-input v-model="prodForm.rebarSpecifications" placeholder="请输入钢筋规格" />
          </el-form-item>

          <el-form-item v-if="value1=='ljg'" label="长：" prop="arcLength">
            <el-input v-model="prodForm.arcLength" placeholder="请输入长" />
          </el-form-item>
          <el-form-item v-if="value1=='ljg'" label="宽：" prop="prodWide">
            <el-input v-model="prodForm.prodWide" placeholder="请输入宽" />
          </el-form-item>
          <el-form-item v-if="value1=='ljg'" label="厚：" prop="proThick">
            <el-input v-model="prodForm.proThick" placeholder="请输入厚" />
          </el-form-item>
          <el-form-item v-if="value1=='ljg'" label="钢板规格：" prop="steelPlateSpecifications">
            <el-input v-model="prodForm.steelPlateSpecifications" placeholder="请输入钢板规格" />
          </el-form-item>

          <el-form-item v-if="value1=='xdg'" label="长：" prop="arcLength">
            <el-input v-model="prodForm.arcLength" placeholder="请输入长" />
          </el-form-item>
          <el-form-item v-if="value1=='xdg'" label="止浆段长度：" prop="prodLong">
            <el-input v-model="prodForm.prodLong" placeholder="请输入止浆段长度" />
          </el-form-item>
          <el-form-item v-if="value1=='xdg'" label="小导管规格：" prop="conduitSpecifications">
            <el-input v-model="prodForm.conduitSpecifications" placeholder="请输入小导管规格" />
          </el-form-item> -->

          <el-form-item label="计划产量：" prop="conduitSpecifications">
            <el-input v-model="prodForm.planNum" placeholder="请输入计划产量" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitProdForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
      <div slot="footer">
        <el-pagination
          background
          :page-size="pageVO.pageSize"
          :current-page.sync="pageVO.pageNum"
          :total="pageVO.total"
          :layout="pageOptions.layout"
          :page-sizes="pageOptions.pageSizes"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      <outbound ref="outboundRef" @submit="getTableData(1)" />
      <warehousingDialog ref="warehousingDialogRef" />
    </page>
  </div>
</template>

<script>
import pageQuery from '../../mixins/pageQuery';
import { getDicts, getInventoryList } from '@/api/inventory';
import { getList, add, edit, updateTaskQuantity, getTypeList } from '@/api/task';
import warehousingDialog from './warehousingDialog.vue';
import outbound from './outbound.vue';

export default {
  mixins: [pageQuery],
  components: { warehousingDialog, outbound },
  data() {
    return {
      tunnelPartsOptions: [],
      unitOptions: [],
      queryParmars: {
        // prodCode: '',
        // tunnel: '',
        // tunnelArea: '',
        // steel: '',
        // unit: '',
      },
      checkedSelection: {}, // 单选存储数据
      tableData1: [],
      prodTitle: '',
      prodForm: {},
      value1: 'wp',
      openProd: false,
      prodRules: {
        tunnel: [{ required: true, message: '请输入所属隧道', trigger: 'blur' }],
        tunnelArea: [{ required: true, message: '请选择隧道区域', trigger: 'chage' }],
        steel: [{ required: true, message: '请输入工字钢类型', trigger: 'blur' }],
        unit: [{ required: true, message: '请选择单元', trigger: 'chage' }],
      },
    };
  },
  created() {
    getDicts({ dictType: 'sys_tunnel_area' }).then(res => {
      this.tunnelPartsOptions = res.data.data;
    });
    getDicts({ dictType: 'sys_prod_unit' }).then(res => {
      this.unitOptions = res.data.data;
    });
    this.getTableData();
  },
  methods: {
    cancel() {
      this.open = false;
      this.$refs.prodForm.resetFields();
      this.openProd = false;
    },
    handleAdd() {
      this.getprolist();
      this.openProd = true;
      this.prodTitle = '添加生产任务';
      this.prodForm={}
    },
    getprolist() {
      const { projectId } = this.$store.getters;
      const parmas = {
        projectId: projectId,
        prodType: 'wp',
      };
      getTypeList(parmas).then(res => {
        this.tableData1 = res.data;
      });
    },
    handleSelectionChange(val) {
      // 单选
      if (val.length == 1) {
        let item = val[val.length - 1];
        this.checkedSelection = JSON.parse(JSON.stringify(item));
      }
      // 单选选中多条时，需要清空所选数据
      if (val.length > 1) {
        this.$refs.multipleTable.clearSelection(); // 清空选项
        this.$refs.multipleTable.toggleRowSelection(val.pop()); // 选中最后点击的数据
      }
      // 取消选中
      if (val.length == 0) {
        this.checkedSelection = {};
      }
    },
    submitProdForm: function () {
      if (!this.checkedSelection.id) {
        return this.$message.warning('请选择类型');
      }
      this.$refs['prodForm'].validate(valid => {
        if (valid) {
          const { projectId } = this.$store.getters;
          this.prodForm.projectId = projectId;
          this.prodForm.prodType = this.value1
          this.prodForm.prodId = this.checkedSelection.id
          if (this.prodForm.id != null) {
            updateTaskQuantity(this.prodForm).then(response => {
              this.$message.success('修改成功');
              this.openProd = false;
              this.getTableData();
            });
          } else {
            add(this.prodForm).then(response => {
              this.$message.success('新增成功');
              this.openProd = false;
              this.getTableData();
            });
          }
        }
      });
    },
    openOutbound(row) {
      this.$refs.outboundRef.openHandle(row);
    },
    openHandle(type, row) {
      this.$refs.warehousingDialogRef.openHandle(type, row);
    },
    resetHandle() {
      this.queryParmars = {
        prodCode: '',
        tunnel: '',
        tunnelArea: '',
        steel: '',
        unit: '',
      };
      this.getTableData(1);
    },
    getTableData(pageNum) {
      if (pageNum) {
        this.pageVO.pageNum = pageNum;
      }
      getList({
        ...this.queryParmars,
        prodType: 'wp',
        pageNo: this.pageVO.pageNum,
        pageSize: this.pageVO.pageSize,
        projectId: this.$store.getters.projectId,
      }).then(res => {
        const { data, total } = res.data || {};
        this.tableData = data || [];
        this.pageVO.total = total;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.inventory-management {
  .btn-query {
    margin-left: 30px;
  }
}
</style>
